<template>
  <div class="home">
    <mu-container class="load-more-wrap">
      <mu-carousel style="max-height: 200px" hide-controls hide-indicators>
        <mu-carousel-item>
          <img class="img" :src="carouselImg2" @click="goAbout">
        </mu-carousel-item>
        <mu-carousel-item>
          <img class="img" :src="carouselImg1" @click="goRules">
        </mu-carousel-item>
      </mu-carousel>
      <div>
        <mu-carousel :interval="4000" style="max-height: 7rem" hide-controls hide-indicators>
          <mu-carousel-item v-for="(item,index) in noticeList" v-bind:key="item.id">
            <mu-list>
              <mu-paper round>
                <mu-list-item :key="item.id" :to="{name:'noticeInfo',query: {id:item.id}}">
                  <mu-list-item-action>
                    <mu-avatar size="22" color="orange900">
                      <mu-icon size="22" value="notifications"></mu-icon>
                    </mu-avatar>
                  </mu-list-item-action>
                  <mu-list-item-content style="margin-left: -2rem">
                    <mu-list-item-sub-title><span v-show="item.type">【{{item.type}}】</span>{{item.title}}
                    </mu-list-item-sub-title>
                  </mu-list-item-content>
                </mu-list-item>
              </mu-paper>
            </mu-list>
          </mu-carousel-item>
        </mu-carousel>
      </div>
      <mu-sub-header>热门案件<span class="more" @click="moreCase">更多</span></mu-sub-header>
      <div>
        <mu-paper style="padding: 0 0 0 0.7rem" v-for="(item, index) in caseList" v-bind:key="index" :z-depth="0">
          <mu-grid-list v-show="caseShow" :key="index" class="grid-list-y" :cols="1"
                        @click="openPage(item.id)">
            <mu-grid-tile :key="index">
              <img class="img" :src="item.img? item.img:carouselImg4">
              <span slot="title">{{item.statusStr}}</span>
              <span slot="subTitle"><b></b></span>
            </mu-grid-tile>
            <mu-list style="margin: -1.3rem 0 0.5rem 0;" textline="three-line">
              <mu-list-item avatar :ripple="false" button>
                <mu-list-item-content>
                  <mu-list-item-title>{{item.companyName}}</mu-list-item-title>
                  <mu-list-item-sub-title>{{item.title}}</mu-list-item-sub-title>
                </mu-list-item-content>
                <mu-list-item-action>
                  <mu-list-item-after-text> {{item.type}}</mu-list-item-after-text>
                </mu-list-item-action>
              </mu-list-item>
            </mu-list>
          </mu-grid-list>
          <mu-sub-header v-show="!caseShow" style="text-align: center">暂无</mu-sub-header>
        </mu-paper>
      </div>
      <mu-paper v-show="token" style="margin-top: 10px" :z-depth="0">
        <mu-sub-header>最新案件公告<span class="more" @click="moreCaseNotices">更多</span></mu-sub-header>
        <mu-list v-show="caseNoticeShow">
          <mu-paper round style="margin-bottom: 1rem" v-for="item in caseNoticeList" v-bind:key="item.id" :z-depth="0">
            <mu-list-item :key="item.id" :to="{name:'noticeInfo',query: {id:item.id}}">
              <mu-list-item-action>
                <mu-avatar color="orange900">
                  <mu-icon value="notifications"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{item.title}}</mu-list-item-title>
                <mu-list-item-sub-title>
                  发布时间：{{util.formatyyyyMMddDate(item.releaseTime)}}
                </mu-list-item-sub-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-list-item-after-text>{{item.type}}</mu-list-item-after-text>
              </mu-list-item-action>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-sub-header v-show="!caseNoticeShow" style="text-align: center">暂无</mu-sub-header>
      </mu-paper>
      <mu-paper v-show="token" style="margin-top: 10px" :z-depth="0">
        <mu-sub-header>最新我的公告<span class="more" @click="moreMyNotices">更多</span></mu-sub-header>
        <mu-list v-show="myNoticeShow">
          <mu-paper round style="margin-bottom: 1rem" v-for="item in myNoticeList" v-bind:key="item.id" :z-depth="0">
            <mu-list-item :key="item.id" :to="{name:'noticeInfo',query: {id:item.id}}">
              <mu-list-item-action>
                <mu-avatar color="orange900">
                  <mu-icon value="notifications"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content>
                <mu-list-item-title>{{item.title}}</mu-list-item-title>
                <mu-list-item-sub-title>
                  发布时间：{{util.formatyyyyMMddDate(item.releaseTime)}}
                </mu-list-item-sub-title>
              </mu-list-item-content>
              <mu-list-item-action>
                <mu-list-item-after-text>{{item.type}}</mu-list-item-after-text>
              </mu-list-item-action>
            </mu-list-item>
          </mu-paper>
        </mu-list>
        <mu-sub-header v-show="!myNoticeShow" style="text-align: center">暂无</mu-sub-header>
      </mu-paper>
    </mu-container>
  </div>
</template>
<script>
  import carouselImg1 from '../../assets/images/carousel1.png';
  import carouselImg2 from '../../assets/images/carousel2.png';
  import carouselImg3 from '../../assets/images/carousel3.png';
  import carouselImg4 from '../../assets/images/carousel4.png';
  import caseImg from '../../assets/images/case.png';

  export default {
    name: 'home',
    data() {
      return {
        caseNoticeShow: false,
        myNoticeShow: false,
        noticeShow: false,
        caseShow: false,
        token: '',
        title: 1,
        num: 10,
        noticeList: [],
        caseNoticeList: [],
        myNoticeList: [],
        caseList: [],
        carouselImg1,
        carouselImg2,
        carouselImg3,
        carouselImg4,
        caseImg
      }
    },
    methods: {
      goNoticeInfo(id) {
        this.$router.push({name: 'noticeInfo', query: {id: id}});
      },
      moreMyNotices() {
        this.$router.push({name: "userNotices", query: {active: 0}});
      },
      moreCaseNotices() {
        this.$router.push({name: "userNotices", query: {active: 1}});
      },
      moreNotices() {
        this.$router.push({name: "noticeList"});
      },
      moreCase() {
        this.$router.push({name: "caseList"});
      },
      openPage(id) {
        this.$router.push({name: 'caseInfo', query: {id: id}});
      },
      listCaseNotice() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fn.release_time",
            operator: "desc",
            value: ''
          }]
        };
        this.postRequest("/notice/listByCase", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseNoticeList = res.data.records;
              if (_self.caseNoticeList && _self.caseNoticeList.length > 0) {
                _self.caseNoticeShow = true;
              } else {
                _self.caseNoticeShow = false;
              }
            }
          }
        });
      },
      listMyNotice() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fn.release_time",
            operator: "desc",
            value: ''
          }]
        };
        this.postRequest("/notice/listByUser", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.myNoticeList = res.data.records;
              if (_self.myNoticeList && _self.myNoticeList.length > 0) {
                _self.myNoticeShow = true;
              } else {
                _self.myNoticeShow = false;
              }
            }
          }
        });
      },
      listNotice() {
        const _self = this;
        let listPO = {
          size: this.num - 5,
          current: 1,
          params: [{
            field: "fn.release_time",
            operator: "desc",
            value: ''
          }]
        };
        this.postRequest("/openNotice/list", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.noticeList = res.data.records;
              if (_self.noticeList && _self.noticeList.length > 0) {
                this.noticeShow = true;
              } else {
                this.noticeShow = false;
              }
            }
          }
        });
      },
      listData() {
        const _self = this;
        let listPO = {
          size: this.num,
          current: 1,
          params: [{
            field: "fh_case.is_hot",
            operator: "=",
            value: this.title
          }]
        };
        this.postRequest("/case/list", listPO).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.caseList = res.data.records;
              if (_self.caseList && _self.caseList.length > 0) {
                this.caseShow = true;
                _self.caseList.forEach(function (i, index) {
                  let statusStr = "";
                  switch (i.status) {
                    case 1:
                      statusStr = "申报中";
                      break;
                    case 2:
                      statusStr = "受理中";
                      break;
                    case 3:
                      statusStr = "调解中";
                      break;
                    case 4:
                      statusStr = "诉讼中";
                      break;
                    case 5:
                      statusStr = "执行中";
                      break;
                    case 6:
                      statusStr = "已结束";
                      break;
                    default:
                      break;
                  }
                  i.statusStr = statusStr;
                });
              }
            }
          }
        });
      },
      visit() {
        this.postRequest("/referral/visit").then(res => {
        });
      },
      goRules() {
        this.$router.push({name: 'activityRules'})
      },
      goAbout() {
        this.$router.push({name: 'about'})
      }
    },
    mounted: function () {
      this.listData();
      this.listNotice();
      if (this.token) {
        this.listCaseNotice();
        this.listMyNotice();
      }
      if (this.getStore("registerToken")) {
        this.visit();
      }
    },
    created() {
      let referral = this.$route.query.referral;
      if (referral) {
        this.setStore("registerToken", referral);
      }
      this.token = this.getStore("accessToken");
    },
    components: {}
  }
</script>

<style scoped lang="less">

  .home {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: auto;
    height: 100%;
    /*background-color: #ffffff;*/
  }

  .img {
    max-height: 200px;
    width: 100%;
    border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    /*position: relative;*/
  }

  .load-more-wrap {
    /*padding: 5px;*/
    width: 100%;
    height: 92%;
    /*display: flex;*/
    overflow: scroll;
    /*flex-direction: column;*/
    .mu-appbar {
      width: 100%;
    }
  }

  .grid-list-x {
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .grid-list-y {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .more {
    float: right;
    margin-right: 1.3rem
  }
</style>
